<template>

    <!--使用change事件-->
    <input type="file" class="clip" id="selectFile" @change="handleFileChange">
    <label for="selectFile" class="button">选择文件</label>

</template>
<script lang="ts">
import {defineComponent} from 'vue'
import axios from 'axios'
import {userStore, shiyanStore} from "@/store";

export default defineComponent({
  name: 'UploadFile',
  setup() {
    const systore = shiyanStore()
    const store = userStore()
    const handleFileChange = (e: Event) => {
      // 断言为HTMLInputElement
      const target = e.target as HTMLInputElement
      const files = target.files
      if (files) {
        const uploadedFile = files[0]
        const formData = new FormData()
        formData.append('multipartFile', uploadedFile)
        formData.append('studentId', store.student_id)
        formData.append('exprimentId', systore.id)
        formData.append('content', '1');
        // 使用node模拟上传接口
        axios.post('/sexpeiment/upload', formData, {
          headers: {
            "Content-Type": 'multipart/form-data'
          }
        }).then(resp => {
          alert("上传成功！！")
        }).catch(error => {
          alert("上传失败！请重新上传")
        })
      }
    }

    return {
      handleFileChange
    }
  }
})
</script>

<style scoped>
.clip{
  position: absolute;
  clip: rect(0, 0, 0, 0);
}
.button{
  display: inline-block;
  width: 96px;
  height: 32px;
  padding: 8px 16px;
  margin: 8px;
  text-align: center;
  line-height: 32px;
  color: gray;
  background: #ecfaf4;
  border-radius: 10px;
  cursor: pointer;
  letter-spacing: 1px;
  font-weight: bold;
}
</style>
